/**
 * 面积图组件
 * 填充的折线图，用于展示数据趋势和区域累积
 */

import React from 'react';
import { Line } from 'react-chartjs-2';
import { ChartData, ChartOptions } from '../types';

interface AreaChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
}

const AreaChart: React.FC<AreaChartProps> = ({
  data,
  options,
  height = 400,
}) => {
  // 将数据转换为面积图格式
  const areaData = {
    ...data,
    datasets: data.datasets.map(dataset => ({
      ...dataset,
      type: 'line',
      fill: true,
      tension: 0, // 0 表示直线连接，不使用曲线
      pointRadius: 3,
      pointHoverRadius: 5,
    })),
  };

  const chartOptions: any = {
    ...options,
    scales: {
      x: {
        beginAtZero: false,
      },
      y: {
        beginAtZero: true,
      },
    },
  };

  return <Line data={areaData as any} options={chartOptions} height={height} />;
};

export default AreaChart;

